<template>
	<view class="">
		<commonHeader :showBack="true" :navigationBarStyle="{iconText:'我的优惠券'}">
		</commonHeader>
		<view class="page-content" :style="{'padding-top': lineHeight + 88 + 'rpx'}">
			<view class="tabs" :style="{'top': lineHeight + 'rpx'}">
				<u-tabs :list="orderTabs" @click="changeTabs" lineColor="#FB625D" lineWidth="50" :activeStyle="{
			         color: '#333',
					 fontWeight:'500',
					 fontSize: '14px',
			     }" :inactiveStyle="{
					color: '#666',
					fontSize: '14px',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 15px; padding-right: 15px; height: 48px;width:33%">
				</u-tabs>
			</view>
			<template v-if="list.length">
				<view class="order-detail" v-for="item in list">
					<view class="justify-between align-center top" @click="pushHome(item)">
						<img :src="item.shopLogo" alt="" class="shop-pic">
						<view class="tag-title">
							{{item.shopName}}
						</view>
						<u-icon name="arrow-right" color="#000000" size="16"></u-icon>
					</view>
					<view class="content center align-center">
						<view class="left">
							<span>￥</span>
							<span>{{item.reduceMoney}}</span>
						</view>
						<view class="right">
							<view class="align-center justify-between coupon-name">
								<view class="">
									{{item.activityName}}
								</view>
								<view class="">
									去使用
								</view>
							</view>
							<view class="align-center sub-title">
								<view class="left">
									满减门槛
								</view>
								<view class="right" v-if="item.threshold">
									满<span>￥{{item.fullMoney}}</span>可用
								</view>
								<view class="right" v-else>
									无门槛
								</view>
							</view>
							<view class="align-center sub-title">
								<view class="left">
									有效期
								</view>
								<view class="right">
									<view class="">
										{{item.startTime}}
									</view>
									<view class="">
										{{item.endTime}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="hide-content" v-if="showContent">
						<view class="align-start hide-content-item">
							<view class="">
								限领数量
							</view>
							<view class="">
								{{item.stockNumber}}
							</view>
						</view>
						<view class="align-start hide-content-item">
							<view class="">
								支付方式
							</view>
							<view class="">
								{{item.paymentMode == 1 ? '微信支付' : item.paymentMode == 4 ?'线下支付' : '余额支付'}}
							</view>
						</view>
						<view class="align-start hide-content-item">
							<view class="">
								使用范围
							</view>
							<view class="">
								{{item.applyType == 1 ? '全部商品': item.applyType == 2 ? '指定商品可用' : '指定商品不可用'}}
							</view>
						</view>
					</view>
					<view class="bottom align-center justify-center" @click="showContent = !showContent">
						规则说明
						<u-icon name="arrow-down" v-if="!showContent" color="#000000" size="16"></u-icon>
						<u-icon name="arrow-up" v-if="showContent" color="#000000" size="16"></u-icon>
					</view>
				</view>
				<view class="load-more" v-if="list.length >= total">
					已经到底啦~
				</view>
			</template>
			<template v-else>
				<view class="no-data">
					<img src="/static/icon/shopCar/pic_wushuju@2x.png" alt="">
					<view class="">
						暂无优惠券~
					</view>
				</view>
			</template>
		</view>
		<view class="total">
			<view class="order-button align-center justify-between">
				<u-checkbox-group v-model="allBussiness" placement="column" @change="groupChange">
					<u-checkbox :name="1" activeColor="#E86C64">
					</u-checkbox>
				</u-checkbox-group>
				<view class="left">
					所有商家
				</view>
				<view style="flex: 10;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				count: 0,
				showCoupon: false,
				showOrderSuccessfullyModal: false,
				list: [],
				getSettlement: null,
				orderId: '',
				state: 0,
				total: 0,
				orderTabs: [{
					name: '待使用',
					badge: {
						value: 0,
					}
				}, {
					name: '已使用',
				}, {
					name: '已过期'
				}],
				allBussiness: 0,
				page: 1,
				pageSize: 10,
				systemsHeight: {},
				lineHeight: 0,
				shopInfo: {},
				showContent: false
			}
		},
		onLoad(e) {
			this.shopInfo = uni.getStorageSync('shopInfo');
			console.log(e, 'e.orderId');
			this.getAll().then(res => {
				this.orderTabs[0].badge.value = this.total
			})
		},
		created() {

		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
				ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
				ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
				ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
			}
			// 底部tabBar的高度
			systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems
				.ktxWindowHeight // 底部tabBar的高度
			this.lineHeight = systems.ktxStatusHeight + 84;
		},
		methods: {
			async getAll() {
				await this.$http.post("coupon/getCouponList", {
					state: this.state
				}).then(res => {
					this.list = res
					console.log(this.list, '123');
					console.log(this.list.length, '123');
				}).catch(res => {
					console.log(res.errMsg);
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					});
				})
			},
			groupChange(e) {
				console.log(this.allBussiness);
				if (this.allBussiness == 1) {
					this.allBussiness = 0
				} else {
					this.allBussiness = 1
				}
			},
			changeTabs(e) {
				console.log(e);
				this.state = e.index
				this.page = 0
				this.list = []
				this.getAll().then(res => {})
			},
			setOrderTabs() {
				this.orderTabs = [{
					name: '处理中',
				}, {
					name: '待支付',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, ]
			},
			pushOrderDetail(item) {
				console.log(item, 'submitData');
				uni.navigateTo({
					url: '/pages/order/orderDetail?orderId=' + item.orderId,
				});
			},
			pushHome(item) {
				uni.$emit('homeAuthorShow', {
					show: true,
					shopId: item.shopId
				})
				uni.switchTab({
					url: '/pages/home/home?shopId=' + item.shopId
				});
			}
		},
		onReachBottom() {
			this.page++
			this.getAll()
		}
	};
</script>

<style lang="scss" scoped>
	.page-content {
		min-height: 100vh;
		padding-bottom: 200rpx;
		padding-top: 90rpx;
		background: #fff;
	}

	.tabs {
		position: fixed;
		top: 54px;
		width: 100%;
		background: #fff;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1800);
		z-index: 999;
	}

	.order-detail {
		width: 670rpx;
		margin: 35rpx 40rpx 30rpx 40rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1200);
		background: #FFFFFF;
		padding-bottom: 20rpx;

		.top {
			border-bottom: 1px dotted #eee;
			height: 103rpx;
			line-height: 90rpx;
			margin: 0 20rpx;

			.shop-pic {
				height: 64rpx;
				width: 64rpx;
				border-radius: 50%;
			}

			.tag-title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #333333;
				padding-left: 20rpx;
				flex: 1;
			}

			.status {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 20rpx;
				width: 120rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
				background: #F8635D;
				border-radius: 4rpx;
			}
		}

		.center {
			padding: 29rpx 29rpx 29rpx 29rpx;

			.left {
				width: 135rpx;

				span:first-child {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #E86C64;
					line-height: 48rpx;
				}

				span:last-child {
					font-size: 62rpx;
					font-family: SF UI Text;
					font-weight: 600;
					color: #E86C64;
					line-height: 48rpx
				}
			}

			.right {
				flex: 1;
				border-left: 1px dotted #EDEDED;
				padding-left: 20rpx;

				.coupon-name {
					view:first-child {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 48px
					}

					view:last-child {
						width: 124rpx;
						height: 52rpx;
						background: #FB645D;
						border-radius: 26rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 52rpx;
						text-align: center;
					}
				}

				.sub-title {
					.left {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 48rpx;
						width: 150rpx;


					}

					.right {
						font-size: 30rpx;
						font-family: SF UI Text;
						font-weight: 400;
						color: #333333;
						line-height: 48rpx;

						span {
							font-size: 36rpx;
							font-family: SF UI Text;
							font-weight: 600;
							color: #E86C64;
							line-height: 48rpx;
						}
					}
				}
			}
		}

		.hide-content {
			padding: 0 26rpx 40rpx;

			.hide-content-item {
				view:first-child {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 48rpx;
					width: 125rpx;
				}

				view:last-child {
					width: 425rpx;
					padding-left: 15rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 48rpx;
				}
			}
		}

		.bottom {
			margin-left: 25rpx;
			margin-right: 25rpx;
			height: 49rpx;
			background: #F6F7FB;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 48rpx;
		}
	}

	.total {
		position: fixed;
		bottom: 0rpx;
		// height: 280rpx;
		width: 100%;
		background: #FFFFFF;
		z-index: 999;
		box-shadow: 0px 2rpx 24rpx 0px rgba(51, 51, 51, 0.1800);
		padding-left: 25rpx;

		.order-button {
			height: 110rpx;
			margin-right: 31rpx;

			.left {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #E86C64;
				padding-left: 31rpx;
			}
		}
	}

	/deep/ .u-number-box__input {
		width: 100rpx !important;
	}

	.load-more {
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666;
		text-align: center;
	}

	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-top: 210rpx;

		img {
			width: 320rpx;
			height: 320rpx;
			margin-bottom: 95rpx;
		}
	}
</style>
